<template>
  <div class="main-charts" @mouseenter="mouseEnter" @mouseleave="mouseLeave">
    <div :class="isScrollTop? 'up' : 'none'" @click.stop="scrollUp"><img src="~@assets/image/up_small.png" alt=""></div>
    <div :class="isScrollBottom? 'down' : 'none'" @click.stop="scrollDown"><img src="~@assets/image/down_small.png" alt=""></div>
    <div ref="scrollFrame" class="scroll-frame" @scroll="scroll">
      <slot />
    </div>
  </div>
</template>
<script>
export default {
  name: 'MainCharts',
  data() {
    return {
      isMouseEnter: false,
      notTouchTop: false,
      notTouchBottom: true,
      scrollTop: 0
    }
  },
  computed: {
    isScrollTop() { // 布尔值，直接决定了上方按钮会不会显示
      return this.isMouseEnter && this.notTouchTop
      // 需要同时满足1.鼠标进入；2.滚动块没有停留在顶部。
    },
    isScrollBottom() {
      return this.isMouseEnter && this.notTouchBottom
    }
  },
  methods: {
    mouseEnter() {
      this.isMouseEnter = true
      this.notTouchBottom = this.$refs.scrollFrame.scrollHeight - this.$refs.scrollFrame.scrollTop > this.$refs.scrollFrame.clientHeight
      this.notTouchTop = this.$refs.scrollFrame.scrollTop > 0
    },
    mouseLeave() {
      this.isMouseEnter = false
    },
    scrollUp() {
      this.scrollTop = this.scrollTop - 20
      this.$refs.scrollFrame.scrollTop = this.scrollTop
      this.notTouchBottom = this.$refs.scrollFrame.scrollHeight - this.$refs.scrollFrame.scrollTop > this.$refs.scrollFrame.clientHeight
      this.notTouchTop = this.$refs.scrollFrame.scrollTop > 0
    },
    scrollDown() {
      this.scrollTop = this.scrollTop + 20
      this.$refs.scrollFrame.scrollTop = this.scrollTop
      this.notTouchBottom = this.$refs.scrollFrame.scrollHeight - this.$refs.scrollFrame.scrollTop > this.$refs.scrollFrame.clientHeight + 10
      this.notTouchTop = this.$refs.scrollFrame.scrollTop > 0
    },
    scroll() {
      this.scrollTop = this.$refs.scrollFrame.scrollTop
      this.notTouchBottom = this.$refs.scrollFrame.scrollHeight - this.$refs.scrollFrame.scrollTop > this.$refs.scrollFrame.clientHeight + 10
      this.notTouchTop = this.$refs.scrollFrame.scrollTop > 0
    }
  }
}
</script>
<style lang="scss" scoped>
.main-charts{
  height: 80%;
  margin-top: 3rem;
  position: relative;
  border: 2px solid #394c62;
  background: #071f3b;
  font-size: 1.4rem;
}

.main-charts .up,.main-charts .down{
  height: 2rem;
  background: rgba($color: #ddd, $alpha: 0.5);
  position: absolute;
  text-align: center;
  z-index: 99;
}
.main-charts .up{
  width: 100%;
  top: 0;
  left: 0;
}
.main-charts .down{
  width: 100%;
  bottom: 0;
  left: 0;
}
.main-charts .up img,.main-charts .down img{
  height: 1.5rem;
  width: 2.5rem;
  vertical-align: -webkit-baseline-middle;
}
.none{
  display: none;
}
.scroll-frame{
  display: flex;
  flex-flow: column;
  justify-content: space-between;
  height: 100%;
  overflow-y:scroll;
  &::-webkit-scrollbar {
    display: none;
  }
  &::-o-scrollbar {
    display: none;
  }
  scrollbar-width: none;
  -ms-overflow-style: none;
}
</style>
